window.addEventListener("load", function () {
	//功能二：API次数tab动态渲染
	//1.获取后台数据，对数据进行遍历
	const apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	//2.遍历时拼接为html结构
	//3.将html结构放入指定位置
	apiData.forEach(function (v) {
		$(
			"#numTab"
		).innerHTML += `<li data-price=${v.price} data-unitprice=${v.unitPrice}>${v.times}次</li>`;
	});
	//给默认的第一个li增加激活样式
	$("#numTab li")[1].classList.add("active");
	//默认显示第一个的价格内容
	$("#rtPrice").innerHTML = `<strong> &yen; ${
		$("#numTab li")[1].dataset.price
	}</strong>
	(约${$("#numTab li")[1].dataset.unitprice}元/次), 仅限实名购买`;
	// 功能一：点击tab区增加激活样式
	// 1.获取相关节点
	$("#numTab li").forEach(function (v) {
		// 2.给li绑定点击事件
		v.addEventListener("click", function () {
			// 思考：如何将默认的第一个li不增加激活样式
			// 提示，用索引可以进行判断，还可以用classList是否包含default判断
			if (!this.classList.contains("default")) {
				// 3.先排他，将li所有的激活类移除
				$("#numTab li").forEach(function (item) {
					item.classList.remove("active");
				});
				// console.log(this.classList.contains("default"));
				// 4.再给自己增加激活类样式
				this.classList.add("active");
				//功能三：点击tab按钮，在下方联动生成对应的价格数据
				$("#rtPrice").innerHTML = `<strong> &yen; ${this.dataset.price}</strong>
				(约${this.dataset.unitprice}元/次), 仅限实名购买`;
			}
		});
	});

	//配置
	const config = {
		selector: "#bannerBg", // 选择器
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#000", //点颜色
		stroke: "0,0,0", //线条颜色
		dist: 8000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});

// 回到顶部
this.window.addEventListener("scroll", function () {
	if (this.scrollY >= 50) {
		$("#getTop").style.opacity = 1;
	} else {
		$("#getTop").style.opacity = 0;
	}
	$("#getTop").addEventListener("click", function () {
		scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});
});
// 功能四：点击tab栏激活对应样式
// 1.获取相关节点
// $('#tabList li')
// 2.给每个li绑定点击事件
/*
	$("#tabList li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他，移除所有的激活样式
			$("#tabList li").forEach(function (item, index) {
				item.classList.remove("active");
				// 通过对应的索引让卡片内容消失
				$("#contLt div")[index].classList.remove("on");
			});
			// 4.再给自己增加激活样式
			this.classList.add("active");
			// 功能五：点击tab显示对应的内容
			// 1.获取相关节点
			// $("#contLt div");
			// 2.让所有的卡片内容消失
			// 3.点击li通过对应的索引显示对应的卡片内容
			$("#contLt div")[i].classList.add("on");
		});
	});
	*/
textTab(".flex li", "active", "#artLt div", "on");
